<template>
  <div>
    <!-- <loading-comp v-if="isShow"></loading-comp> -->
    <div class="up" v-if="!isShow" @click="up"></div>
    <ul>
      <li v-for="(item, index) in cartoon" :key="index">
        <div v-if="item">
          <img :src="item" />
        </div>
      </li>
    </ul>
    <loading-comp v-if="isShow"></loading-comp>
    <div class="base" v-if="!isShow">
      <router-link
        :to="`/detail/look?id=${epid[num - 0 + 1]}&num=${num - 0 + 1}`"
      >
        下一话</router-link
      >
    </div>
  </div>
</template>

<script>
import LoadingComp from "@/components/LoadingComp.vue";
import { get } from "@/http/request.js";

export default {
  name: "Look",
  components: {
    LoadingComp,
  },
  data() {
    return {
      id: this.$route.query.id,
      num: this.$route.query.num,
      isShow: true,
      img: [],
      cartoon: [],
    };
  },
  props: ["epid"],
  watch: {
    $route: {
      handler(newValue, oldValue) {
        this.id = newValue.query.id;
        this.num = newValue.query.num;
        this.getUrl();
      },
      deep: true,
    },
  },
  methods: {
    up() {
      this.$router.go(-1);
    },
    // 漫画
    async getUrl() {
      this.isShow = true;

      await get(
        `https://apis.netstart.cn/bcomic/GetImageIndex?epId=${this.id}`
      ).then((data) => {
        if (data && data.code === 0) {
          // console.log(data);
          this.img = data.data.images;
          for (let i = 0; i < this.img.length; i++) {
            this.getImg(i);
          }
        }
      });
    },
    async getImg(i) {
      // console.log(1111);
      await get(
        `https://apis.netstart.cn/bcomic/ImageToken?urls=["https://manga.hdslb.com${this.img[i].path}@660w.jpg"]`
      ).then((data) => {
        if (data && data.code === 0) {
          // console.log(data);
          // this.img = data.data.images;
          data.data.forEach((item) => {
            this.cartoon.push(
              `https://manga.hdslb.com${this.img[i].path}@660w.jpg?token=${item.token}`
            );
          });
          this.isShow = false;
        }
      });
    },
  },

  mounted() {
    this.getUrl();
  },
};
</script>

<style lang='scss' scoped>
@import "@/static/common/base.scss";

div {
  height: 100%;
  width: 100%;
  img {
    // height: 100%;
    width: 100%;
  }
}
.up {
  width: 10vw;
  height: 10vw;
  position: fixed;
  background-color: red;
  top: 2vw;
  left: 2vw;
  background: url("@/assets/左箭头.png") no-repeat center;
  background-size: 100%;
}
.base {
  height: 15vw;
  background-color: $bgc;
  text-align: center;
  line-height: 15vw;
  a {
    color: #fff;
  }
}
</style>